<template>
	<view class="container">
		<!-- 头部安全距离 -->
		<view class="status_bar"></view>
		<view class="blind_box">
			<view class="blind_box_content">
				<view class="blind_box_card" v-for="(item,index) in boxCardData" :key="index">
					<view class="blind_box_btn">
						<u-button @click="open" text="开启盲盒" shape="circle" color="var(--echo-main-color)"></u-button>
					</view>
				</view>
			</view>
			<u-popup round="20" bgColor="#555" :closeOnClickOverlay="false" :closeable="true" :show="show" mode="center"
				@close="close" @open="open">
				<view class="open_blind_box">
					<p>恭喜获得NFT</p>
					<image src="../../static/images/nft/tou.png" mode="" class="open_blind_box_img"></image>
					<p>神秘NFT</p>
					<u-button @click="check(openNft.serialNo)" text="查看藏品" shape="circle"
						color="var(--echo-main-color)">
					</u-button>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				boxCardData: [{
						imgUrl: '../../static/images/nft/tou.png',
						btnText: '投放盲盒1'
					},
					{
						imgUrl: '../../static/images/nft/tou.png',
						btnText: '投盲盒2'
					}
				]
			}
		},
		methods: {
			// 打开盲盒
			open() {
				this.show = true
			},

			// 关闭
			close() {
				this.show = false
			},

			// 查看盲盒
			check() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background: $echo-nft-bg-color;

		// 顶部安全距离
		.status_bar {
			height: var(--status-bar-height);
		}

		.blind_box {
			padding: 30rpx;

			.blind_box_content {
				display: flex;
				justify-content: space-between;

				.blind_box_card {
					position: relative;
					border-radius: 8rpx;
					width: 48%;
					height: 300rpx;
					background-color: rgba(250, 250, 250, 0.1);
					background-image: url(../../static/images/nft/tou.png);

					.blind_box_btn {
						position: absolute;
						transform: translate(-50%, -50%);
						top: 50%;
						left: 50%;
					}
				}
			}

			.open_blind_box {
				padding: 80rpx;
				width: 500rpx;

				p {
					color: #fff;
					text-align: center;
					margin-bottom: 20px;
				}

				.open_blind_box_img {
					position: relative;
					width: 200rpx;
					height: 200rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
</style>
